<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <meta name="keywords" content="网站关键字">
    <meta name="description" content="网站的描述，显示在搜索结果中">
    <meta http-equiv="时间秒无单位，重定向的网址"> -->
    <title>模仿（作为搜索结果的超链接）</title>
    <!-- <script type="text/javascript">
        window.onload = function () {
            // Event对象，在页面加载完后触发此代码，可以确保所有DOM对象加载完毕
        }
    </script> -->
    <!-- <link rel="stylesheet" href="./03外部样式表.css"> -->
    <!-- CSS外部样式表:通过link标签进行引入,意味着外部样式表可以复用 -->
    <link rel="stylesheet" href="./CSS/reset.css">
    <link rel="stylesheet" href="./FAwesome/css/all.css">
    <link rel="icon" href="图标链接">
    <style>
        .outer{
            height: 200px;
            border: darkcyan 10px solid;
        }
        .inner{
            width: 200px;
            height: 200px;
            margin:0 auto;
            background-color: green;
            overflow:auto
        }
    </style>

</head>
<body>
    <img src="./resources/img/烟.png" width=100 alt="找不到">
    <audio src="./resources/audio/sndqd_1.mp3" controls></audio>
    <video src="./resources/vidio/1234.mp4" controls height="200"></video>
    <i class="fa fa-thermometer-empty"></i>
    
    <div>
        <a href="./01测试编辑器.html" target="_self">超链接</a>
        <!-- ./表示当前文件所在的目录,../表示当前文件所在的目录的上一级,../../再上一级 -->
    </div>



    <div>
        <button id="btn">我是一个按钮</button>

            <script type="text/javascript">
            // script标签写在body底部才能确保页面加载完后执行
                var btn = document.getElementById("btn");
                    // 通过DOM Document的方法获取按钮元素对象
                btn.innerHTML = "修改后的按钮"
                    // 通过DOM Element元素对象的方法设置元素
                btn.onclick = function () {
                    alert("谢谢点击");
                };
                    // 为元素对应的事件绑定响应函数（回调函数，触发执行）
            </script>
    </div>

    <a href="#" target="_self">回到顶部</a>
    
    <div class="outer">
        <div class="inner">子元素</div>
    </div>









        




    


        
    <!-- <div>
        网站图标:
                <link rel="icon" href="图标链接">
                图标一般存储在根目录的favicon.icon下
        CSS内部样式表:
                <style>
                    p{color: red;font-size: 50px;}
                </style>
                修改所有p标签下字体的颜色.遵循CSS语法.

        其它标签
                <img>标签(替换元素):用来引入一个外部图片,是一个自结束标签
                    属性:src    指定的是外部图片的路径
                         alt    描述,找不到时显示的内容.搜索引擎会根据alt来识别图片,不写不被引擎收录
                         weith  图片的宽度,单位是像素,如只修改一个属性,另一个会等比缩放
                         height 图片的高度,不建议修改图片大小,缩小浪费内存,放大失真.移动端或许有需要.

                <audio>标签:用来引入一个视频文件,默认情况下不允许用户控制
                    属性:src    指定的是外部音频的路径(或在中间引入source标签)
                         comtrols是否允许用户播放,有则允许
                         autoplay是否自动播放(大部分浏览器不会自动播放,忽略)
                         loop   音乐是否循环播放

                <embed>标签:老标签,用来引入外部文件音视频(不好用)
                    <embed src="" type="audio/mp3" width="" height="">

                除了通过src指定外部了文件路径外,还可以通过sourse来指定文件
                    <audio controls>
                        <source src="地址1">
                        <source src="地址1不能用时格式2">
                        <embed src="地址格式3" type="audio/mp3" width="" height="">
                        对不起您的浏览器不支持播放音频文件
                    </audio>
                只会显示一个则当浏览器无法识别标签时显示文字
                    <video src="" controls="controls">
                        您的浏览器不支持 video 标签。
                    </video>同理
        
         其它属性
                id属性 (唯一不重复)
                    每个标签都可以添加,是元素唯一标识,区分大小写

        布局标签（结构化语义标签） 
                <div>（常用）表示区块，主要布局元素</div>
                <span>（常用）行内元素，主要用来包裹文字</span>

                <header>表示网页的头部，页眉（介绍信息）</header>
                <main>表示网页的主体</main>
                <footer>表示网页的底部，页脚</footer>
                <nav>表示网页的导航</nav>
                <aside>主体内容之外的相关内容（侧边栏）</aside>
                <article>表示一个独立的文章</article>
                <section>表示上面不能表示的独立区块</section>

        标题 (都是块元素block element)
                <hgroup>为标题分组</hgroup>
                <h1>一般只有一个</h1>
                <h6>最不重要</h6>
                <p>表示一个段落</p>

        列表
                <ul>无序列表，用的多</ul>
                    <li>列表项，无有无序列表包裹</li>z'z
                <ol>有序列表</ol>
                    <li>列表项，无有无序列表包裹</li>
                <dl>定义列表</dl>
                    <dt>列表内容</dt>
                        <dd>说明</dd>

        行内元素 (online element)：在页面不会中独占一行的元素行内元素主要用来包裹文字
                <em>        （语义化标签）表示语调的加重，  倾斜</em>
                <strong>    （语义化标签）表示强调重要内容，加粗</strong>
                <q>         （语义化标签）表示一个短引用，  双引号</q>
                <br>        （语义化标签）表示换行

        超链接 (行内元素，内部嵌套除自身的任何元素)
                <a href="地址">超链接</a>
                    href值可以是外部网址(绝对路径)
                        也可以写一个内部页面地址(同目录下)
                            ./表示当前文件所在的目录,../表示当前文件所在的目录的上一级, ../../再上一级 
                        也可以是#目标元素id,无id默认回到页面顶部(常用来占位)
                    target属性,用来指定超链接打开的位置
                        可选值:  _self  默认值 在当前页面打开
                                _blank 在一个新的页面中打开链接
                
        内联框架,用于向当前页面引入一个其它页面(较少使用)
                <iframe src="引入网页路径" width="800" height="600" frameborder="0"></iframe>
                    frameborder指定内联框架有无边框,0或1

        <pre>不解析直接显示</pre>



    </div> -->

<iframe src="" frameborder="0"></iframe>

    <!-- <div>
        <h2>实体</h2>
        <p>空格&nbsp;</p>
        <p>大于号&gt;</p>
        <p>小于号1&lt;</p>
        <p>版权保护&copy;</p>
    </div> -->
 

</body>
</html>